<!-- 用户主页 -->
<template>
  <div>
    <!-- 导航 -->
    <div :style="headerStyle">
      <van-icon @click="onBack" name="arrow-left" size="20px" color="gray" style="font-weight: bold; padding-left: 20px"/>
      <span v-show="showTitle" style="color: #FF8800;font-weight: bold">{{nick}}</span>
      <van-icon name="ellipsis" size="20px" color="gray" style="padding-right: 20px; font-weight: bold;"/>
    </div>
    <!-- 头像昵称签名 -->
    <div>
      <div ref="avatar" :style="{'height':'25vh', 'background-image': 'url('+backImg+')', 'background-size': '100% 100%', 'background-color': 'LightGrey', 'color': 'white' }">
        <div style="padding: 30px 0;">
          <van-image round height="80" width="80" :src="avatar"/>
          <div style="font-size: 18px; font-weight: bold">{{nick}}</div>
          <div>{{sign}}</div>
        </div>
      </div>
      <div style="background-color: #F5F5F5; height: 5px;"></div>
      <!-- 粉丝关注帖子 -->
      <div style="padding:10px 50px; display: flex; justify-content: space-between;">
        <div @click="onGoUserArticle">
          <div style="font-weight: bold; font-size: 18px">250</div>
          <div>帖子</div>
        </div>
        <div @click="onGoUserFans">
          <div style="font-weight: bold; font-size: 18px">523</div>
          <div>粉丝</div>
        </div>
        <div @click="onGoUserFollows">
          <div style="font-weight: bold; font-size: 18px">138</div>
          <div>关注</div>
        </div>
      </div>
      <div style="background-color: #F5F5F5; height: 5px"></div>
      <!-- 动态 相册 资料 -->
      <van-tabs v-model="tabId" swipeable sticky offset-top="40" @change="onTabChange">
        <van-tab title="动态" style="min-height: calc(75vh - 120px)">
          <div v-for="i in 1" :key="i">动态{{i}}</div>
        </van-tab>
        <van-tab title="相册" style="min-height: calc(75vh - 120px)">
          <div v-for="i in 1000" :key="i">相册{{i}}</div>
        </van-tab>
        <van-tab title="资料" style="min-height: calc(75vh - 120px)">
          <div v-for="i in 1000" :key="i">资料{{i}}</div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
export default {
  name: 'UserHome',
  data () {
    return {
      avatar: '',
      nick: '',
      sign: '',
      showTitle: false,
      headerStyle: 'height: 46px; display: flex; justify-content: space-between; align-items: center; background-color: rgba(243,243,243,0); position: fixed; top: 0px; width: 100%; text-align: left; display: flex; just',
      headerStyle1: 'height: 46px; display: flex; justify-content: space-between; align-items: center; background-color: rgba(243,243,243,0); position: fixed; top: 0px; width: 100%; text-align: left',
      headerStyle2: 'height: 46px; display: flex; justify-content: space-between; align-items: center; background-color: rgba(243,243,243,1); position: fixed; top: 0px; width: 100%; text-align: left;z-index: 101',
      backImg: 'http://laoapp.antegg.net/img/userhome/home4.jpg',
      tabId: 0,
      scrolltopList: [0, 0, 0]
    }
  },
  methods: {
    onLoad () {
      if (parseInt(this.$route.query.id) === this.$store.state.user.id) {
        this.avatar = this.$store.state.user.avatar
        this.nick = this.$store.state.user.nick
        this.sign = this.$store.state.user.signature
      } else {
        this.$api.getUserHomeInfoReq({ userId: parseInt(this.$route.query.id) }).then(
          (resp) => {
            this.avatar = resp.userInfo.avatar
            this.nick = resp.userInfo.nick
            this.sign = resp.userInfo.signature
          }
        )
      }
    },
    onTabChange (idx) {
      setTimeout(
        () => {
          window.scroll(0, this.scrolltopList[this.tabId])
        }, 0)
    },
    // 返回
    onBack () {
      this.$router.back()
    },
    // 保存
    onSave () {

    },
    onScroll () {
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      this.scrolltopList[this.tabId] = scrollTop
      let h = this.$refs.avatar.scrollHeight
      console.log('++++++++++', this.tabId, scrollTop, this.scrolltopList[0], this.scrolltopList[1], this.scrolltopList[2])
      if (scrollTop > h - 40) {
        this.headerStyle = this.headerStyle2
        this.showTitle = true
      } else {
        this.headerStyle = this.headerStyle1
        this.showTitle = false
      }
    },
    // 帖子
    onGoUserArticle () {
      this.$router.push({ path: '/userArticleList', query: { id: this.$route.query.id } })
    },
    // 粉丝
    onGoUserFans () {
      this.$router.push({ path: '/friend', query: { id: this.$route.query.id } })
    },
    // 关注
    onGoUserFollows () {
      this.$router.push({ path: '/friend', query: { id: this.$route.query.id } })
    }
  },
  computed: {
  },
  activated () {
    // this.onLoad()
    // window.scroll(0, 1000)
    // window.addEventListener('scroll', this.onScroll)
  },
  // deactivated () {
  //   window.removeEventListener('scroll', this.onScroll)
  // },
  mounted () {
    this.onLoad()
    window.addEventListener('scroll', this.onScroll)
  },
  destroyed () {
    window.removeEventListener('scroll', this.onScroll)
  }
}
</script>

<style scoped>

</style>
